<template>
    <div class="mainBox">
		<el-button type="text" style="float: left;margin-left: 15px;" @click="deleteMessage">
					<i class="iconfont icon-shanchu" style="font-size: 20px;color:#fd034f"></i>
					<span style="margin-left: 5px;white-space: nowrap;width: 50px;color: #000000;">删除</span>
		</el-button>
		<el-input placeholder="请输入关键字搜索" v-model="searchvalue" style="float: right;width: 30%;">
            <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
		</el-input>   
        <el-table :data="systemMessageList" 
            tooltip-effect="dark" 
            style="width: 100%;height: 90%;" stripe 
            @selection-change="handleSelectionChange" 
            :row-key='getRowKeys'
            :expand-row-keys="expands"
            @expand-change="expandSelect">
				<el-table-column type="selection" >
				</el-table-column>
				<el-table-column prop="title" label="内容" align="center" valign="middle" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="datetime" label="时间" align="center" valign="middle" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="work" label="操作" align="center" valign="middle" show-overflow-tooltip>
					<template slot-scope="scope">
                        <el-button v-if="scope.row.hasRead==true" size="mini" type="info" disabled>已读</el-button>
                        <el-button v-else size="mini" type="primary" style="background-color: #409EFF;" @click="handleUpdateMessage(scope.$index, scope.row)">忽略</el-button>
					</template>
				</el-table-column>
                <el-table-column type="expand" prop="children">
                    <template>
                        <div >
                            <el-row style="hieght:20px;margin-top:15px;">
                            <el-col :span="1" style="color:#409EFF;font-size:20px;hieght:20px;" class="juZhong">
                                    <i class="el-icon-s-order"></i>
                            </el-col>
                            <el-col :span="23" style="hieght:20px;">
                                <span style="color:#707070;font-size:16px;">基本信息</span>
                            </el-col>
                            </el-row>
                            <el-row style="margin-top:20px">
                                <el-col :span="23" :offset="1">
                                    <el-table
                                        :data="xinXi"
                                        border
                                        style="width: 90%">
                                        <el-table-column
                                        prop="postName"
                                        label="招聘名"      
                                        align="center"
                                        >
                                        </el-table-column>
                                        <el-table-column
                                        prop="companyName"
                                        label="发布方"
                                        align="center"
                                        >
                                        </el-table-column>
                                        <el-table-column
                                        prop="contact"
                                        label="联系方式"
                                        align="center"
                                        >
                                        </el-table-column>
                                    </el-table>
                                </el-col>
                            </el-row>
                        </div>
                        <div>
                            <el-row style="hieght:20px;margin-top:15px;">
                            <el-col :span="1" style="color:#409EFF;font-size:20px;hieght:20px;" class="juZhong">
                                    <i class="el-icon-s-data"></i>
                            </el-col>
                            <el-col :span="23" style="hieght:20px;">
                                <span style="color:#707070;font-size:16px;">重要指标</span>
                            </el-col>
                            </el-row>
                            <el-row style="margin-top:20px">
                                <el-col :span="23" :offset="1">
                                    <el-table
                                        :data="zhiBiao"
                                        border
                                        style="width: 90%">
                                        <el-table-column
                                        prop="dianJi"
                                        label="点击量"
                                        align="center"
                                        >
                                        </el-table-column>
                                        <el-table-column
                                        prop="baoMing"
                                        label="报名量"
                                        align="center"
                                        >
                                        </el-table-column>
                                        <el-table-column
                                        prop="shouCang"
                                        label="收藏量"
                                        align="center"
                                        >
                                        </el-table-column>
                                        <el-table-column
                                        prop="fenXiang"
                                        label="分享量"
                                        align="center"
                                        >
                                        </el-table-column>
                                    </el-table>
                                </el-col>
                            </el-row>
                        </div>
                    </template>
                </el-table-column>
			</el-table>    

            <el-pagination v-show="all!=1" background :page-size="pageSize" @current-change="handleCurrentChange" layout="total, prev, pager, next, jumper"
			 :page-count="all" class="fenYe">

			</el-pagination> 
    </div>
</template>

<script>
export default {
    data(){
        return{
            expands: [],
            xinXi:[
                {
                    companyName:'',
                    postName:'',
                    contact:'',
                }
            ],
            zhiBiao:[{
                dianJi:'',
                baoMing:'',
                shouCang:'',
                fenXiang:''
            }],
            pageSize:10,
            pageNo: 1,
			all: 1,
            systemMessageList:[],
            multipleSelection: [],
            searchvalue: '',
            deleteList:[],
        }
    },
    mounted(){
        this.getSystemMessages();
    },
    methods:{
        getRowKeys(row){
             return row.id
        },
        expandSelect(row, expandedRows) {
            var URL=row.url;
            console.log(row);
            console.log(expandedRows);
                console.log(URL);
                        this.$ajax({
                        method:'get',
                        url:URL,
                    }).then(response =>{
                        var code=0;
                        code=response.data.code;
                        if(code==0){
                            console.log(response.data.data); 
                            this.xinXi[0].postName=response.data.data.postName;
                            this.xinXi[0].companyName=response.data.data.companyName;
                            this.xinXi[0].contact=response.data.data.contact;
                            this.zhiBiao[0].dianJi=response.data.data.clickCount;
                            this.zhiBiao[0].baoMing=response.data.data.enrollCount;
                            this.zhiBiao[0].shouCang=response.data.data.collectCount;
                            this.zhiBiao[0].fenXiang=response.data.data.shareCount;
                        }else{
                            this.xinXi[0].postName='';
                            this.xinXi[0].companyName='';
                            this.xinXi[0].contact='';
                            this.zhiBiao[0].dianJi='';
                            this.zhiBiao[0].baoMing='';
                            this.zhiBiao[0].shouCang='';
                            this.zhiBiao[0].fenXiang='';
                        }
                    }).catch(error => {
                    console.log('详情获取失败');
                    });
            var that = this
            if (expandedRows.length) {
                    that.expands = []
                    if (row) {
                    that.expands.push(row.id)
                    }
            } 
            else {
                    that.expands = []
            }
        },
        
        search(){
            this.pageNo=1;
            this.getSystemMessages();
        },
        deleteMessage(){
            console.log('这里是选中的：');
            console.log(this.multipleSelection);
            var i=0;
            for(i=0;i<this.multipleSelection.length;i++){
                this.deleteList.push(this.multipleSelection[i].id)
            }
            console.log(this.deleteList);
            var URL='http://47.101.180.43:8075/message/systemMessageRemove'
                        this.$ajax({
                        method:'delete',
                        url:URL,
                        data:this.deleteList,
                    }).then(response =>{
                        var code=0;
                        code=response.data.code;
                        if(code==0){
                            console.log(response.data.data);
                            this.$notify({
                                message: response.data.data,
                                type: 'success'
                            });
                            this.getSystemMessages();
                        }else{
                            console.log(response.data.msg); 
                            this.$notify({
                                message:response.data.msg
                            });
                        }
                    }).catch(error => {
                    console.log('消息删除失败');
                    });
        },
        getSystemMessages(){
            var URL='http://47.101.180.43:8075/message/systemMessagesSearch'
                        this.$ajax({
                        method:'get',
                        url:URL,
                        params:{
                            pageNo:this.pageNo,
                            pageSize:this.pageSize,
                            keyWord:this.searchvalue,
                        },
                    }).then(response =>{
                        var code=0;
                        code=response.data.code;
                        if(code==0){
                            this.all=response.data.data.pages;
                            this.systemMessageList=response.data.data.info;
                            console.log(this.systemMessageList);
                        }else{
                            console.log(response.data.msg); 
                            this.$notify({
                                message:response.data.msg
                            });
                        }
                    }).catch(error => {
                    console.log('消息获取失败');
                    });
        },
        handleUpdateMessage(index, row) {
            console.log(index, row);
            console.log(this.systemMessageList[index].id);
            var URL='http://47.101.180.43:8075/message/systemMessageIgnore'
                        this.$ajax({
                        method:'post',
                        url:URL,
                        params:{
                            messageId:this.systemMessageList[index].id
                        },
                    }).then(response =>{
                        var code=0;
                        code=response.data.code;
                        if(code==0){
                            this.$notify({
                                message:response.data.data
                            });
                            this.getSystemMessages();
                        }else{
                            console.log(response.data.msg); 
                            this.$notify({
                                message:response.data.msg
                            });
                        }
                    }).catch(error => {
                    console.log('忽略失败');
                    });
        },
        handleCurrentChange(val) {
				this.pageNo = val;
				this.getSystemMessages();
				console.log(`当前页: ${val}`);
			},
        handleSelectionChange(val) {
			this.multipleSelection = val;
		},
    },
}
</script>

<style>
.fenYe{
    position: absolute;
    bottom:30px;
    right:10px;
}
.mainBox{
    min-height: 700px;
	background-color: #FFFFFF;
	margin-top: 20px;
	padding: 20px;
	border-radius: 10px;
}
</style>